<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel>
      <el-carousel-item v-for="item in bannerArr">
        <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
    <!--  食谱开始  -->
    <el-row :gutter="10" style="background-color:white;margin-top: 10px">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="selectRecipe" default-active="0"
                 active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in recipeCatArr" :index="c.id">{{c.name}}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in recipeArr" style="margin-top: 10px">
        <el-card>
          <router-link :to="'/detail?id='+item.id">
<!--         /2024/01/13/xxx.jpg   -->
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height:150px">
            <p style="height: 40px">{{item.title}}</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{item.nickname}}</el-col>
            <el-col :span="10" style="line-height: 40px">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center;margin: 5px">
      <el-button @click="router.push('/list?type=1')">点击加载更多</el-button>
    </div>
    <!--  食谱结束  -->
    <!--  视频开始  -->
    <el-row :gutter="10" style="background-color:white;margin-top: 10px">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu @select="selectVideo" mode="horizontal" default-active="0"
                 active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in videoCatArr" :index="c.id">{{c.name}}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in videoArr" style="margin-top: 10px">
        <el-card>
          <router-link :to="'/detail?id='+item.id">
            <!--         /2024/01/13/xxx.jpg   -->
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height:150px">
            <p style="height: 40px">{{item.title}}</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{item.nickname}}</el-col>
            <el-col :span="10" style="line-height: 40px">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center;margin: 5px">
      <el-button @click="router.push('/list?type=2')">点击加载更多</el-button>
    </div>
    <!--  视频结束  -->
    <!--  资讯开始  -->
    <el-row :gutter="10" style="background-color:white;margin-top: 10px">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu @select="selectInfo" mode="horizontal" default-active="0"
                 active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in infoCatArr" :index="c.id">{{c.name}}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in infoArr" style="margin-top: 10px">
        <el-card>
          <router-link :to="'/detail?id='+item.id">
            <!--         /2024/01/13/xxx.jpg   -->
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height:150px">
            <p style="height: 40px">{{item.title}}</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{item.nickname}}</el-col>
            <el-col :span="10" style="line-height: 40px">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center;margin: 5px">
      <el-button @click="router.push('/list?type=3')">点击加载更多</el-button>
    </div>
    <!--  资讯结束  -->
  </div>
</template>

<script setup>

import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";

const recipeCatArr = ref([]);
const videoCatArr = ref([]);
const infoCatArr = ref([]);
const recipeArr = ref([]);
const videoArr = ref([]);
const infoArr = ref([]);
const selectRecipe = (index,indexPath)=>{
  //index 二级分类的id
  loadContents(1,index);
}
const selectVideo = (index,indexPath)=>{
  loadContents(2,index);
}
const selectInfo = (index,indexPath)=>{
  loadContents(3,index);
}
const loadContents = (type,categoryId)=>{
  let data = qs.stringify({type:type,categoryId:categoryId});
  axios.get('http://localhost:8080/v1/contents/index?'+data)
  .then((response)=>{
    if (response.data.code==2001){
      switch (type) {
        case 1:
          recipeArr.value=response.data.data;
          break;
        case 2:
          videoArr.value=response.data.data;
          break;
        case 3:
          infoArr.value=response.data.data;
          break;
      }
    }
  })
}
const bannerArr = ref([]);
onMounted(()=>{
  //请求轮播图数据
  axios.get('http://localhost:8080/v1/banners/index')
  .then((response)=>{
    if (response.data.code==2001){
      bannerArr.value = response.data.data;
    }
  })
  //请求三种类型下的全部数据
  loadContents(1,0);
  loadContents(2,0);
  loadContents(3,0);

  axios.get('http://localhost:8080/v1/categories/1/sub')
      .then((response)=>{
        if (response.data.code==2001){
          recipeCatArr.value = response.data.data;
        }
      })
  axios.get('http://localhost:8080/v1/categories/2/sub')
      .then((response)=>{
        if (response.data.code==2001){
          videoCatArr.value = response.data.data;
        }
      })
  axios.get('http://localhost:8080/v1/categories/3/sub')
      .then((response)=>{
        if (response.data.code==2001){
          infoCatArr.value = response.data.data;
        }
      })
})

</script>

<style scoped>
  a{
    text-decoration: none;
    color: #333;
  }
  a:hover{color: orange}
</style>